<template>
  <el-upload ref="upload" class="avatar-uploader" :before-upload="beforeAvatarUpload" action="#"
             :http-request="uploadFile" :auto-upload="false" multiple list-type="picture-card" :file-list="fileList"
             :on-change="fileChange">
    <el-icon>
      <Plus />
    </el-icon>
    <template #file="{ file }">
      <img :src="file.url" alt="" />
    </template>

  </el-upload>
  <el-input v-model="name" label="name"></el-input>
  <el-input v-model="gender" label="gender"></el-input>
  <el-input v-model="phone" label="phone"></el-input>
  <el-input v-model="email" label="email"></el-input>
  <el-button type="primary" @click="handleUpdateAvatar">确认更新</el-button>
  <el-button @click="cancel">取消</el-button>
</template>

<script>
import axios from "axios";
export default {
  name: "UserUpload",
  data() {
    return {
      fileList: [],
      name: '1',
      gender: '1',
      phone: '1',
      email: '1',
    };
  },
  methods: {
    // 自定义上传图片方法,参数必须为params
    uploadFile(params) {
      const file = params.file;
      var forms = new FormData();
      // 我这里需要将更新时间和uid同时传给后端，后端使用对象接收，所以没有设置content-type
      // 如果你只传file，要设置axios中headers的content-type为：multipart/form-data
      forms.append("file", file);
      forms.append("name", this.name);
      forms.append("gender", this.gender);
      forms.append("phone", this.phone);
      forms.append("email", this.email);
      axios.post("http://localhost:8088/user/update",forms,{withCredentials:true})
        .then(res => {
        if (res.data.code == "200") {
          this.$message({
            message: '上传成功',
            type: 'success'
          })
          this.avatarDialogVisible = false;
        } else {
          this.$message({
            message: '上传失败',
            type: 'error'
          })
        }
      }).catch(err => {
        console.log("上传文件时发生错误: " + err);
      })
    },
    // 上传图片时检查
    beforeAvatarUpload(file) {
      //允许的图片类型
      const imgType = (file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type === 'image/gif');
      //文件大小3M
      const imgLimit= (file.size / 1024 / 1024) < 3;
      if (!imgType) {
        this.$message.error("只允许jpg、png、gif格式的图片");
        return false;
      }
      if (!imgLimit) {
        this.$message.error("上传的图片大小不能超过3MB");
        return false;
      }
      console.log("检查通过");
      return true;
    },
    //文件改变时的钩子函数,只能上传一张，选中后会覆盖掉之前的图片，
    fileChange(file, fileList) {
      //this.file表示上一张被选中的图片，file.raw表示当前选中的图片
      this.file = file.raw;
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]];
      }
    },
    // 确认修改头像
    handleUpdateAvatar() {
      this.$refs['upload'].submit();
      this.avatarDialogVisible = false;
      this.$refs['upload'].clearFiles();
    },
    // 取消上传头像
    cancel() {
      this.avatarDialogVisible = false;
      this.$refs['upload'].clearFiles();
    },
  }

}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>